<template>
  <ProTable
    class="page-table"
    ref="tableRef"
    row-key="id"
    :request="requestApi"
    :columns="columns"
    @selectedChange="selectedChange"
    :formProps="{
      'label-width': '96px',
    }"
  >
    <template #toolbarHeader>
      <el-button type="primary" v-permission="['list:search-table:add']"> 新建 </el-button>
      <el-button v-if="multipleSelection.length"> 批量删除 </el-button>
      <el-button v-if="multipleSelection.length"> 批量审批 </el-button>
    </template>

    <template #tableHeader>
      <!-- 提示信息 -->
      <Alert>
        <template #icon>
          <Icon icon="material-symbols:info" />
        </template>
        已选择
        <el-text type="primary"> &nbsp;{{ multipleSelection.length }}&nbsp; </el-text>
        项&nbsp; 服务调用次数总计&nbsp;
        <el-text tag="b">{{ serviceCallTotal }}</el-text> &nbsp;次

        <template #operation>
          <el-button type="primary" link @click="clearSelection" v-if="!!multipleSelection.length">
            取消选择
          </el-button>
        </template>
      </Alert>
    </template>

    <!-- 表格列 -->
    <template #status="scope">
      <span :class="['circle', scope.row.status]"></span>
      {{ statusMap[scope.row.status]?.label }}
    </template>
    <template #operations>
      <el-button link type="primary" size="small">编辑</el-button>
      <el-divider direction="vertical" />
      <el-button link type="primary" size="small">订阅警报</el-button>
    </template>
  </ProTable>
</template>

<script setup lang="jsx">
import { computed, ref, useTemplateRef } from 'vue'
import { Icon } from '@iconify/vue'
import { getSearchTableList } from '@/api/list'
import Alert from '@/components/alert/index.vue'
import { ProTable } from '@/components/table'
import { ElMessage } from 'element-plus'

defineOptions({
  name: 'SearchTable', //不命名组件，keep-alive的include不属性生效
})
const statusMap = {
  closed: { label: '关闭', value: 'closed' },
  running: { label: '运行中', value: 'running' },
  online: { label: '已上线', value: 'online' },
  exception: { label: '异常', value: 'exception' },
}
const tableRef = useTemplateRef('tableRef')
const multipleSelection = ref([])
const columns = ref([
  { type: 'selection', width: 55 },
  {
    prop: 'ruleName',
    label: '规则名称',
    'min-width': 150,
    search: {
      valueType: 'el-input',
      props: {
        placeholder: '请输入',
      },
    },
  },
  {
    prop: 'describe',
    label: '描述',
    'min-width': 130,
    search: {
      valueType: 'el-input',
      props: {
        placeholder: '请输入',
      },
    },
  },
  {
    render: (scope) => {
      return <div>{scope.row['serviceCallNumber']}次</div>
    },
    prop: 'serviceCallNumber',
    label: '服务调用次数',
    'min-width': 130,
    search: {
      valueType: 'el-input',
      props: {
        placeholder: '请输入',
      },
    },
  },
  {
    prop: 'prevCallTime',
    label: '上次调用时间',
    'min-width': 170,
    search: {
      valueType: 'el-input',
      props: {
        placeholder: '请输入',
      },
    },
  },
  {
    slotName: 'status',
    prop: 'status',
    label: '状态',
    'min-width': 120,
    search: {
      valueType: 'el-select',
      options: [
        { label: '关闭', value: 'closed' },
        { label: '运行中', value: 'running' },
        { label: '已上线', value: 'online' },
        { label: '异常', value: 'exception' },
      ],
      props: {
        placeholder: '请选择',
      },
    },
  },
  {
    slotName: 'operations',
    prop: 'operations',
    label: '操作',
    fixed: 'right',
    align: 'center',
    width: 150,
  },
])

const requestApi = async (params) => {
  try {
    const {
      data: { list, total },
      msg,
    } = await getSearchTableList(params)
    return Promise.resolve({
      data: list,
      total,
      msg,
      success: true,
    })
  } catch (err) {
    ElMessage.error('数据请求失败!')
    throw new Error(`数据请求失败: ${err.message || err}`)
  }
}

// 表格选择更改
const selectedChange = (selection) => {
  multipleSelection.value = selection
}

// 清楚表格 选择
const clearSelection = () => {
  tableRef.value?.clearSelection?.()
}

// 服务调用次数总计
const serviceCallTotal = computed(() => {
  return multipleSelection.value.reduce((acc, item) => {
    return Number(acc) + Number(item.serviceCallNumber)
  }, 0)
})
</script>

<style scoped lang="scss">
.circle {
  &.closed {
    background-color: var(--el-color-info);
  }

  &.running {
    background-color: var(--el-color-primary);
  }

  &.online {
    background-color: var(--el-color-success);
  }

  &.exception {
    background-color: var(--el-color-error);
  }
}
</style>
